/*
 * SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */

@layer base
  svg
    fill: currentColor

  :focus-visible
    @apply outline-none
    @apply ring-2 ring-offset-2
    @apply ring-yellow-500 bg-yellow-100 ring-offset-yellow-100

    :is(.dark &)
      @apply ring-yellow-400 bg-yellow-100 ring-offset-yellow-100

  details>summary
    @apply cursor-pointer

    &:not(.with-marker)
      @apply list-none
      &::-webkit-details-marker
        display: none

@layer base
  *
    scrollbar-color: rgb(var(--color-gray-400)) rgb(var(--color-gray-100))
    scrollbar-width: auto

  *::-webkit-scrollbar
    width: 4px

  *::-webkit-scrollbar-track
    width: 4px
    background: rgb(var(--color-gray-100))

  *::-webkit-scrollbar-thumb
    background-color: rgb(var(--color-gray-400))
    width: 2px
    border-radius: 3px

@layer base
  @media print
    html
      font-size: 8pt

  // JS enabled CSS rules
  body.js
    input::-ms-reveal,
    input::-ms-clear
      display: none


@layer base
  /* autoprefixer: off */
  @supports (contain: paint) and (not (-moz-appearance: none))
    input[type="password"]:not(:placeholder-shown)
      font-family: pass,sans-serif
      letter-spacing: 1px

@layer utilities
  .outline-std
    @apply outline-1 outline-dotted outline-current
